[번역]Part2 1.11 Coordinates by kbpark · Pull Request #829 · javascript-tutorial/ko.javascript.info

kbpark · 2020-09-02T12:33:31Z

[번역]Part2 1.11 Coordinates

Pull Request 체크리스트

TODO

번역 규칙을 확인하셨나요?
- 줄 바꿈과 단락을 '원문과 동일하게' 유지하셨나요?
- 맞춤법 검사기로 맞춤법을 확인하셨나요?
- 마크다운 문법에 사용되는 공백(스페이스), 큰따옴표("), 작은따옴표('), 대시(-), 백틱(`) 등의 특수문자는 그대로 두셨나요?
로컬 서버 세팅 후 최종 결과물을 확인해 보셨나요?
PR 하나엔 번역문 하나만 넣으셨나요?
의미 있는 커밋 메시지를 작성하셨나요?
- 예시
  - [프락시] 번역
  - [프락시] 과제 번역
  - [if문과 조건부 연산자 '?'] 리뷰
  - [주석] 2차 리뷰
  - [Date 객체와 날짜] 번역

Violet-Bora-Lee

코멘트에 있는 댓글들을 참고하여 퇴고 부탁드립니다.
아래쪽에도 유사한 실수가 반복되어서 위쪽만 먼저 리뷰하였습니다.

Violet-Bora-Lee · 2020-09-19T08:29:09Z

2-ui/1-document/11-coordinates/article.md

+요소를 움직이려면 좌표에 익숙해져야 합니다.

-Most JavaScript methods deal with one of two coordinate systems:
+대부분의 JavaScript 메서드는 다음 두 좌표 체계 중 하나를 이용합니다.


Suggested change

대부분의 JavaScript 메서드는 다음 두 좌표 체계 중 하나를 이용합니다.

대부분의 자바스크립트 메서드는 다음 두 좌표 체계 중 하나를 이용합니다.

Violet-Bora-Lee · 2020-09-19T08:30:08Z

2-ui/1-document/11-coordinates/article.md

-2. **Relative to the document** - similar to `position:absolute` in the document root, calculated from the document top/left edge.
-    - we'll denote them `pageX/pageY`.
+1. **window 기준** - `position:fixed`와 유사하게 window 상단/왼쪽 모서리에서부터 계산합니다.
+    - 앞으로는 이 좌표를 `clientX/clientY`로 표시하며, 왜 이런 이름을 쓰는지는 나중에 event 프로퍼티를 공부할 때 명확히 알 수 있을 것입니다.


http://m.blog.naver.com/ojhnews/220840570533

이 글 한번 읽어보시고, 문장 개선 부탁드립니다

Violet-Bora-Lee · 2020-09-19T08:32:54Z

2-ui/1-document/11-coordinates/article.md

+    - 앞으로는 `pageX/pageY`로 표시합니다.

-When the page is scrolled to the very beginning, so that the top/left corner of the window is exactly the document top/left corner, these coordinates equal each other. But after the document shifts, window-relative coordinates of elements change, as elements move across the window, while document-relative coordinates remain the same.
+페이지를 스크롤 하려고 할 때, 맨 처음에는 window 상단/왼쪽 모서리가 document 상단/왼쪽 모서리와 정확히 일치합니다. 그 이후 document가 움직이면서 요소의 window 기준 좌표는 바뀌지만, document 기준 좌표는 그대로입니다.


Suggested change

페이지를 스크롤 하려고 할 때, 맨 처음에는 window 상단/왼쪽 모서리가 document 상단/왼쪽 모서리와 정확히 일치합니다. 그 이후 document가 움직이면서 요소의 window 기준 좌표는 바뀌지만, document 기준 좌표는 그대로입니다.

스크롤을 움직이기 바로 전에는 window 상단/왼쪽 모서리가 document 상단/왼쪽 모서리와 정확히 일치합니다. 그런데 스크롤이 움직이기 시작하면 document가 움직이기 때문에 document 기준 좌표는 그대로이지만 요소의 window 기준 좌표는 바뀝니다.

Violet-Bora-Lee · 2020-09-19T08:33:37Z

2-ui/1-document/11-coordinates/article.md


-1. Relative to the window -- `elem.getBoundingClientRect()`.
-2. Relative to the document -- `elem.getBoundingClientRect()` plus the current page scroll.
+1. window 기준 -- `elem.getBoundingClientRect()`.


https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80#%EB%AC%B8%EC%9E%A5%EC%9D%B4-%EB%AA%85%EC%82%AC%ED%98%95%EC%9C%BC%EB%A1%9C-%EB%81%9D%EB%82%A0-%EB%95%8C%EB%8A%94-%EB%A7%88%EC%B9%A8%ED%91%9C%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EC%8A%B5%EB%8B%88%EB%8B%A4

모범사례 확인부탁드립니다

Violet-Bora-Lee · 2020-09-19T08:34:10Z

2-ui/1-document/11-coordinates/article.md

+- `pageY` - document 기준 좌표는 document 상단(스크롤 되어 밀려남)에서부터 계산되어 동일합니다.
+- `clientY` - window 기준 좌표는 해당 지점이 window 상단과 가까워지면서 변화(화살표가 짧아짐)되었습니다.

 ## Element coordinates: getBoundingClientRect


번역 누락

Violet-Bora-Lee · 2020-09-19T08:36:41Z

2-ui/1-document/11-coordinates/article.md


-```warn header="Internet Explorer: no support for `x/y`"
-Internet Explorer doesn't support `x/y` properties for historical reasons.
+```warn header="Internet Explorer: `x/y` 미지원"


Suggested change

```warn header="Internet Explorer: `x/y` 미지원"

```warn header="Internet Explorer는 `x/y`를 지원하지 않습니다."

Violet-Bora-Lee · 2020-09-19T08:39:46Z

2-ui/1-document/11-coordinates/article.md

+Internet Explorer는 예전부터 `x/y` 프로퍼티를 지원하지 않아 왔습니다.

-So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`.
+그래서 폴리필을 만들거나(`DomRect.prototype`에 getter 추가), `elem.getBoundingClientRect()` 결괏값에서는 `width/height`가 양수여서 `x/y`와 동일하기 때문에 그냥 `top/left`을 이용합니다.


Suggested change

그래서 폴리필을 만들거나(`DomRect.prototype`에 getter 추가), `elem.getBoundingClientRect()` 결괏값에서는 `width/height`가 양수여서 `x/y`와 동일하기 때문에 그냥 `top/left`을 이용합니다.

그래서 `DomRect.prototype`에 getter를 추가해 폴리필을 만들거나 `elem.getBoundingClientRect()`를 호출하면 그 결괏값의 `width/height`가 양수라는 특징을 이용해 `x/y`대신 `top/left`을 이용합니다.

Violet-Bora-Lee · 2020-09-19T08:39:55Z

2-ui/1-document/11-coordinates/article.md


-```warn header="Coordinates right/bottom are different from CSS position properties"
-There are obvious similarities between window-relative coordinates and CSS `position:fixed`.
+```warn header="right/bottom 좌표는 CSS position 프로퍼티와는 다릅니다"


Suggested change

```warn header="right/bottom 좌표는 CSS position 프로퍼티와는 다릅니다"

```warn header="right/bottom 좌표는 CSS position 프로퍼티와는 다릅니다."

Violet-Bora-Lee · 2020-09-19T08:40:16Z

2-ui/1-document/11-coordinates/article.md

+window 기준 좌표와 CSS `position:fixed` 사이에는 명백한 유사점이 있습니다.

-But in CSS positioning, `right` property means the distance from the right edge, and `bottom` property means the distance from the bottom edge.
+그러나 CSS position에서는, `right` 프로퍼티는 오른쪽 모서리로부터의 거리, `bottom` 프로퍼티는 하단 모서리로부터의 거리를 의미합니다.


https://github.com/javascript-tutorial/ko.javascript.info/wiki/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%B2%94-%EC%82%AC%EB%A1%80#%EC%89%BC%ED%91%9C%EB%A5%BC-%EB%AA%A8%EB%91%90-%EC%98%AE%EA%B8%B8-%ED%95%84%EC%9A%94%EB%8A%94-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4

Violet-Bora-Lee · 2020-09-19T08:40:32Z

2-ui/1-document/11-coordinates/article.md


-````warn header="For out-of-window coordinates the `elementFromPoint` returns `null`"
-The method `document.elementFromPoint(x,y)` only works if `(x,y)` are inside the visible area.
+````warn header="window 밖으로 나간 좌표에서 `elementFromPoint`는 `null`을 리턴합니다"


Suggested change

````warn header="window 밖으로 나간 좌표에서 `elementFromPoint`는 `null`을 리턴합니다"

````warn header="window 밖으로 나간 좌표에서 `elementFromPoint`는 `null`을 리턴합니다."

javascript-translate-bot · 2020-09-19T08:41:20Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

kbpark · 2020-09-19T18:40:40Z

/done

수정하였습니다.

Violet-Bora-Lee · 2021-01-04T15:56:38Z

머지 진행하겠습니다.
리뷰 및 진행이 늦어져서 죄송합니다...

감사합니다 👍

Violet-Bora-Lee · 2021-01-04T15:56:58Z

이슈와 대시보드 업데이트 부탁드릴게요

javascript-translate-bot added the review needed label Sep 2, 2020

Violet-Bora-Lee requested changes Sep 19, 2020

View reviewed changes

javascript-translate-bot added changes requested and removed review needed labels Sep 19, 2020

[번역]Part2 1.11 Coordinates

fcfb5e6

kbpark force-pushed the new_part2_1.11.coordinates branch 2 times, most recently from 9563e4d to fcfb5e6 Compare September 19, 2020 18:39

javascript-translate-bot added review needed and removed changes requested labels Sep 19, 2020

javascript-translate-bot requested a review from a team September 19, 2020 18:40

Violet-Bora-Lee merged commit f098812 into javascript-tutorial:master Jan 4, 2021

kbpark deleted the new_part2_1.11.coordinates branch January 24, 2021 12:10

	대부분의 JavaScript 메서드는 다음 두 좌표 체계 중 하나를 이용합니다.
	대부분의 자바스크립트 메서드는 다음 두 좌표 체계 중 하나를 이용합니다.

	페이지를 스크롤 하려고 할 때, 맨 처음에는 window 상단/왼쪽 모서리가 document 상단/왼쪽 모서리와 정확히 일치합니다. 그 이후 document가 움직이면서 요소의 window 기준 좌표는 바뀌지만, document 기준 좌표는 그대로입니다.
	스크롤을 움직이기 바로 전에는 window 상단/왼쪽 모서리가 document 상단/왼쪽 모서리와 정확히 일치합니다. 그런데 스크롤이 움직이기 시작하면 document가 움직이기 때문에 document 기준 좌표는 그대로이지만 요소의 window 기준 좌표는 바뀝니다.

	```warn header="Internet Explorer: `x/y` 미지원"
	```warn header="Internet Explorer는 `x/y`를 지원하지 않습니다."

	그래서 폴리필을 만들거나(`DomRect.prototype`에 getter 추가), `elem.getBoundingClientRect()` 결괏값에서는 `width/height`가 양수여서 `x/y`와 동일하기 때문에 그냥 `top/left`을 이용합니다.
	그래서 `DomRect.prototype`에 getter를 추가해 폴리필을 만들거나 `elem.getBoundingClientRect()`를 호출하면 그 결괏값의 `width/height`가 양수라는 특징을 이용해 `x/y`대신 `top/left`을 이용합니다.

	```warn header="right/bottom 좌표는 CSS position 프로퍼티와는 다릅니다"
	```warn header="right/bottom 좌표는 CSS position 프로퍼티와는 다릅니다."

	````warn header="window 밖으로 나간 좌표에서 `elementFromPoint`는 `null`을 리턴합니다"
	````warn header="window 밖으로 나간 좌표에서 `elementFromPoint`는 `null`을 리턴합니다."

Conversation

kbpark commented Sep 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request 체크리스트

TODO

Uh oh!

Violet-Bora-Lee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Sep 19, 2020

Uh oh!

kbpark commented Sep 19, 2020

Uh oh!

Violet-Bora-Lee commented Jan 4, 2021

Uh oh!

Violet-Bora-Lee commented Jan 4, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kbpark commented Sep 2, 2020 •

edited

Loading